<template>
  <div class=" publicBox" id="serviceCss">
          <div class="boxItem " id="publicSearch">
<el-form ref="form" :inline="true"  class="demo-form-inline">
 <el-form-item>
            <el-button class="pubBtnGree"  type="primary" @click="Newservice()">新建</el-button>
  </el-form-item>
</el-form>
          </div>
          <public-table 
          @handleEdit="handleEdit" 
          :columnDefs="columnDefs" 
          :tableData="tableData" 
          :order=false
          :btn="['edit']"></public-table>
  </div>
</template>

<script>
import publicTable from "@/components/public/publicTable.vue"
import *as API from "@api/operate.js"
export default {
  components: {
         publicTable
  },
  data() {
    return {
        columnDefs :[
            {headerName: '服务项目ID', field: 'no',width:150},
            {headerName: '服务项目名称', field: 'name',width:240},
            {headerName: '服务时长', field: 'time',width:200},
            {headerName: '适用设备类型', field: 'typename',width:161},
            {headerName: '使用设备型号', field: 'model',width:397}
        ],
        tableData: []
    }
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {


  },
  // 监控data中的数据变化
  watch: {


 },
  methods: {
    Newservice(){
      this.$router.push({path:"/platform/operate/serviceNewbuild"})
    },
    handleEdit(row){   //编辑
      this.$router.push({path:"/platform/operate/serviceNewbuild",query:{data:row}})
    },
    async init(){
      let res = await API.getserviceAPI().then(res=>{
        if(res.IsPositive){
          this.tableData = res.Data
          console.log("res",res.Data)
        }else{
          this.$message.error({message:res.ErrorCode})
        }
      })
    }
  },
  created() {
    this.init()
  },
  mounted() {

  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

<style lang='less' scoped>
@import "../../styles/less/public.less";
  #serviceCss{
    .boxItem{
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      .demo-form-inline{
        align-items: center;
      } 
    } 
  }
</style>